<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>fullPage__网易邮箱</title>
    <style type="text/css"></style>
    <link rel="stylesheet" href="css/jquery.fullPage.css"/>
    <link rel="stylesheet" href="less/style.css"/>
    <script src="js/jquery-3.1.0.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.min.js" type="text/javascript"></script>
    <script src="js/jquery.fullPage.min.js" type="text/javascript"></script>

    <script>
        $(function(){
            $.fn.fullpage({
                anchors:['page1','page2','page3','page4','page5'],
                slidesColor:['black','yellow','pink','lightgray','orange'],

                //设置使用默认导航
                navigation:true,
                //添加导航名
                navigationTooltips:['第一屏','第二屏','第三屏','第四屏','第五屏']

            });
        })
    </script>
</head>

<body>

<!--必须使用section这个类名-->
<section class="section section1 active">
    <!--背景图-->
    <div class="bg"><img src="img/section1.jpg" alt=""/></div>

    <!--2、中间部分内容-->
    <div class="bg12"></div>
    <div class="bg13"></div>

    <!--3、顶部以及中间的内容-->
    <div class="mail">
        <a href="#" class="mail-163">163邮箱</a>
        <a href="#" class="mail-126">126邮箱</a>
        <a href="#" class="mail-yeah">yeah邮箱</a>
    </div>
    <div class="hgroup">
        <h1><a href="#">网易邮箱6.0</a></h1>
        <h2>改变，不止所见。</h2>
    </div>
</section>
<section class="section section2">
    <div class="bg2"><img src="img/section2.jpg" alt=""/></div>
    <div class="eyes">[ 视觉·简 ]</div>
    <h3 class="t2">华丽蜕变，尽享愉悦之美</h3>
    <div class="t2_font">秉承网易邮箱经典的清新简洁的设计风格，邮箱 6.0 版带来全新一代的设计理念，
        更追求极致唯美的视觉设计、传承更多人文和艺术底蕴，华丽蜕变，带来更舒服更爽心悦目的视觉享受。
    </div>
    <!--中间-->
    <div class="bg23"></div>
    <!--两侧-->
    <div class="bg21"></div>
    <div class="bg22"></div>


</section>
<section class="section section3">
    <div class="bg3"><img src="img/section3.jpg" alt=""/></div>
    <div class="eyes_3">[ 视觉化交互设计 ]</div>
    <div class="t3">心随眼动，感官直接体验</div>
    <div class="t3_font">邮箱 6.0 版采用了全新的视觉化交互设计，通过对界面的整体风格设计、
        重要信息的视觉化处理以及元素本身的视觉传达优化，来实现产品流程设计和交互行为塑造。
        从视觉的角度出发，让用户无需多想，直接通过感官与产品进行交互。
    </div>

    <!--背景图标-->
    <div class="bg31"></div>
    <div class="bg32"></div>
    <div class="bg33"></div>
</section>
<section class="section section4">
    <div class="bg4"><img src="img/section4.jpg" alt=""/></div>
    <div class="pifu">[ 动态情景皮肤 ]</div>
    <div class="beautiful">美轮美奂，百变尽随你心</div>
    <div class="t4">国内首创动态情景皮肤，可以随着早晚时光，季节主题的变幻而自动切换，
        实现了在邮箱里也能感受天气和心情的变化，带来完全不同的页面体验并且呈现最佳视觉感受，
        还特别针对原有邮箱皮肤的对比度和色彩进行了微调，减少视觉疲劳感。
    </div>
    <div class="bg41"></div>
    <div class="bg42"></div>
    <div class="bg43"></div>
</section>
<section class="section section5">
    <div class="bg5"><img src="img/section5.jpg" alt=""/></div>
    <div class="gongneng">[ 功能·创 ]</div>
    <div class="linghuo">灵活机变，全面为你而生</div>
</section>

</body>
<script></script>


</html>